@import "compass/css3";

$blue-gray: #34495e;
$blue-gray-darken: #2c3e50;
$blue: #3498db;
$blue-darken: #2980b9;
$green: #1abc9c;
$green-darken: #16a085;

$breadcrumb-back:#f6f8f8;

.tri-breadcrumb {
    //background-color: $blue-gray;
    background-color: #fff;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0;

    list-style: none;
    //display: inline-block;
    display: block;
    font-size: 12px;

    &::after {
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }

    .icon {
        font-size: 12px;
    }

    li {
        float: left;
        &:first-child {
            a {
                position: relative;
                left: 10px;
                margin-right: 13px;
                padding-right: 15px;
                background: $blue;
                @include border-radius(0 4px 4px 0);
                &::after {
                    border: none;
                    content: "";
                }
                &:before {
                    border-left-color: transparent;
                    border-top-color: transparent;
                    border-bottom-color: transparent;
                    border-right-color: $blue;
                }

                &:hover {
                    background-color: $blue-darken;

                    &:before {
                        border-right-color: $blue-darken;
                    }
                }
            }
        }

        &:nth-child(2) {
            a {
                padding-left: 15px;
                //@include border-radius(0 4px 4px 0);
                @include border-radius(4px 0 0 4px);
                &:before {
                    border: none;
                }
                //&::after {
                //    border: none;
                //}
                //&::before {
                //    border-right-color: $color-success-bg;
                //    border-top-color: $color-success-bg;
                //    border-bottom-color: $color-success-bg;
                //}
            }
        }
        &:last-child {
            a {
                padding-right: 15px;
                background: $color-success-bg;
                @include border-radius(0 4px 4px 0);
                &::after {
                    border: none;
                }
                &::before {
                    border-right-color: $color-success-bg;
                    border-top-color: $color-success-bg;
                    border-bottom-color: $color-success-bg;
                }
            }
        }
        &:not(:first-child){
            a{
                &:hover {
                    background-color: $color-success-bg;

                    &:before {
                        border-color: $color-success-bg;
                        border-left-color: transparent;
                    }
                    &:after {
                        border-left-color: $color-success-bg;
                    }
                }

                &:active {
                    background-color: $color-success-bg;

                    &:before {
                        border-color: $color-success-bg;
                        border-left-color: transparent;
                    }
                    &:after {
                        border-left-color: $color-success-bg;
                    }
                }
            }
        }
        a {
            //color: $color-dark-lter;
            color: #FFF;
            display: block;
            //background: $breadcrumb-back;
            background: $color-dark-lter;
            text-decoration: none;
            position: relative;
            height: 30px;
            line-height: 30px;
            padding: 0 10px 0 5px;
            text-align: center;
            margin-right: 23px;
            font-size: 12px;

            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 0;
                //border: 0 solid $blue;
                border-style: solid;
                //border-color: $breadcrumb-back;
                border-color: $color-dark-lter;
                border-width: 15px 10px;
                width: 0;
                height: 0;
            }
            &:before {
                left: -20px;
                border-left-color: transparent;
            }
            &:after {
                left: 100%;
                border-color: transparent;
                //border-left-color: $breadcrumb-back;
                border-left-color: $color-dark-lter;
            }





        }
    }
}

.tri-breadcrumb-bak {
    list-style: none;
    display: inline-block;

    .icon {
        font-size: 14px;
    }

    li {
        float: left;
        a {
            color: #FFF;
            display: block;
            background: $blue;
            text-decoration: none;
            position: relative;
            height: 40px;
            line-height: 40px;
            padding: 0 10px 0 5px;
            text-align: center;
            margin-right: 23px;
        }
        &:nth-child(even) {
            a {
                background-color: $blue-darken;

                &:before {
                    border-color: $blue-darken;
                    border-left-color: transparent;
                }
                &:after {
                    border-left-color: $blue-darken;
                }
            }
        }
        &:first-child {
            a {
                padding-left: 15px;
                @include border-radius(4px 0 0 4px);
                &:before {
                    border: none;
                }
            }
        }
        &:last-child {
            a {
                padding-right: 15px;
                @include border-radius(0 4px 4px 0);
                &:after {
                    border: none;
                }
            }
        }

        a {
            &:before,
            &:after {
                content: "";
                position: absolute;
                top: 0;
                //border: 0 solid $blue;
                border-style: solid;
                border-color: $blue;
                border-width: 20px 10px;
                width: 0;
                height: 0;
            }
            &:before {
                left: -20px;
                border-left-color: transparent;
            }
            &:after {
                left: 100%;
                border-color: transparent;
                border-left-color: $blue;
            }
            &:hover {
                background-color: $green;

                &:before {
                    border-color: $green;
                    border-left-color: transparent;
                }
                &:after {
                    border-left-color: $green;
                }
            }
            &:active {
                background-color: $green-darken;

                &:before {
                    border-color: $green-darken;
                    border-left-color: transparent;
                }
                &:after {
                    border-left-color: $green-darken;
                }
            }
        }
    }
}
